.gradio_bg[theme="default"] .gradio_interface {
    .component_set { 
        @apply bg-gray-50 dark:bg-gray-700 dark:drop-shadow-xl shadow;
    }
    .component {
        @apply mb-2;
    }
    .panel_header {
        @apply uppercase text-xs;
    }
    .panel_button {
        @apply hover:bg-gray-100 dark:hover:bg-gray-600 shadow;
    }
    .panel_button.disabled {
        @apply text-gray-400 cursor-not-allowed;
    }
    .panel_button.submit {
        @apply bg-yellow-500 hover:bg-yellow-400 dark:bg-red-700 dark:hover:bg-red-600 text-white;
    }
    .examples {
        .examples_table_holder:not(.gallery) {
            @apply shadow;
            .examples_table {
                @apply rounded dark:bg-gray-700;
                thead {
                    @apply border-gray-300 dark:border-gray-600;
                }
                tbody tr:hover {
                    @apply bg-yellow-500 dark:bg-red-700 text-white;
                }
            }
        }
        .examples_table_holder.gallery .examples_table {
            tbody td {
                @apply shadow;
            }
            tbody td:hover {
                @apply bg-yellow-500 text-white;
            }
        }
    }
    /* Common Classes */
    .edit_buttons {
        @apply m-1 flex gap-1;
    }
    .edit_button {
        @apply bg-yellow-500 dark:bg-red-600 rounded shadow;
    }
    .clear_button {
        @apply bg-gray-50 dark:bg-gray-500 rounded shadow;
    }
    .upload_zone {
        @apply transition hover:border-gray-400 hover:text-gray-500 dark:hover:border-gray-300 dark:hover:text-gray-300;
    }
    /* Input Components */
    .input_text {
        input, textarea {
            @apply shadow transition hover:shadow-md dark:bg-gray-800;
        }
    }
    .input_number {
        input {
            @apply shadow transition hover:shadow-md dark:bg-gray-800;
        }
    }
    .input_radio {
        .radio_item {
            @apply bg-white dark:bg-gray-800 shadow transition hover:shadow-md;            
        }
        .radio_circle {
            @apply bg-gray-50 dark:bg-gray-400 border-4 border-gray-200 dark:border-gray-600;
        }
        .radio_item.selected {
            @apply  bg-yellow-500 dark:bg-red-600 text-white shadow;
        }
        .radio_circle {
            @apply w-4 h-4 bg-white transition rounded-full box-border;
        }
        .selected .radio_circle {
            @apply border-yellow-600 dark:border-red-700;
        }
    }
    .input_image {
        .snapshot {
            button {
                @apply dark:bg-red-600;
            }
        }
    }
    .input_checkbox_group, .input_checkbox {
        .checkbox_item {
            @apply bg-white dark:bg-gray-800 shadow transition hover:shadow-md;
        }
        .checkbox {
            @apply bg-gray-100 dark:bg-gray-400 transition;
        }
        .checkbox_item.selected {
            @apply bg-yellow-500 dark:bg-red-600 text-white;
        }
        .selected .checkbox {
            @apply bg-yellow-600 dark:bg-red-700;
        }
    }
    .input_slider {
        .range {
            @apply bg-white dark:bg-gray-800 shadow h-3 transition hover:shadow-md;
        }
        .range::-webkit-slider-thumb {
            @apply bg-gradient-to-b from-yellow-400 to-yellow-500 dark:from-red-500 dark:to-red-600 shadow;
        }
        .range::-moz-range-thumb {
            @apply bg-gradient-to-b from-yellow-400 to-yellow-500 shadow;
        }
        .value {
            @apply bg-gray-100 dark:bg-gray-600 font-semibold;
        }
    }
    .input_dropdown {
        .selector  {
            @apply bg-white dark:bg-gray-800 shadow transition hover:shadow-md;
        }
        .dropdown_menu {
            @apply shadow;
        }
        .dropdown_item {
            @apply bg-white dark:bg-gray-800 hover:bg-yellow-500 dark:hover:bg-red-600 hover:text-gray-50 hover:font-semibold;
        }
    }
    .input_audio {
        .start, .stop {
            @apply shadow transition hover:shadow-md;
        }
        .start {
            @apply bg-white dark:bg-gray-800;
        }
    }
    /* Output Components */
    .output_text {
        @apply shadow;
    }
    .output_image {
        @apply dark:bg-gray-600;
    }
    .output_label {
        .label {
            @apply text-sm h-5;
        }
        .confidence {
            @apply font-mono box-border border-b-2 border-gray-300 bg-gray-200 dark:bg-gray-500 dark:border-gray-600 text-sm h-5 font-semibold rounded;
        }
        .confidence:first-child {
            @apply border-yellow-600 bg-yellow-500 dark:bg-red-600 border-red-700 text-white;
        }
    }
    .output_highlightedtext {
        .textfield {
            @apply shadow;
        }
    }
}